<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>贪吃蛇游戏</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f0f0f0;
      font-family: Arial, sans-serif;
    }

    .game-container {
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 100%;
      flex-wrap: wrap;
    }

    #gameCanvas {
      border: 2px solid #333;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      margin: 0 auto;
    }

    #gameControls {
      text-align: center;
      margin: 0 auto;
      padding: 0 8px;
    }

    #gameScore {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    #score {
      font-size: 24px;
      margin: 10px 0;
    }

    #startBtn {
      font-size: 18px;
      padding: 12px 24px;
      background: linear-gradient(145deg, #f0f0f0, #cacaca);
      color: #333;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 5px 5px 10px #bebebe,
      -5px -5px 10px #ffffff;
      position: relative;
      overflow: hidden;
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    #startBtn::before {
      content: '';
      position: absolute;
      top: 2px;
      left: 2px;
      right: 2px;
      bottom: 50%;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent);
      border-radius: 8px 8px 0 0;
      pointer-events: none;
    }

    #startBtn:hover {
      transform: translateY(-2px);
      box-shadow: 6px 6px 12px #bebebe,
      -6px -6px 12px #ffffff;
      background: linear-gradient(145deg, #f5f5f5, #d0d0d0);
    }

    #startBtn:active {
      transform: translateY(1px);
      box-shadow: inset 4px 4px 8px #bebebe,
      inset -4px -4px 8px #ffffff;
      background: linear-gradient(145deg, #e6e6e6, #c0c0c0);
    }

    .controls {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      width: 180px;
      margin: 20px auto;
    }

    .control-btn {
      width: 60px;
      height: 60px;
      font-size: 24px;
      background: linear-gradient(145deg, #f0f0f0, #cacaca);
      color: #333;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 5px 5px 10px #bebebe,
      -5px -5px 10px #ffffff;
      position: relative;
      overflow: hidden;
    }

    .control-btn::before {
      content: '';
      position: absolute;
      top: 5%;
      left: 5%;
      right: 5%;
      bottom: 5%;
      border-radius: 50%;
      z-index: -1;
    }

    .control-btn:hover {
      transform: translateY(-2px);
      box-shadow: 6px 6px 12px #bebebe,
      -6px -6px 12px #ffffff;
    }

    .control-btn:active {
      transform: translateY(1px);
      box-shadow: inset 4px 4px 8px #bebebe,
      inset -4px -4px 8px #ffffff;
    }

    #up {
      grid-column: 2;
    }

    #left {
      grid-column: 1;
      grid-row: 2;
    }

    #right {
      grid-column: 3;
      grid-row: 2;
    }

    #down {
      grid-column: 2;
      grid-row: 3;
    }
  </style>
</head>

<body>
<div class="game-container">
  <canvas id="gameCanvas" width="300" height="300"></canvas>
  <div id="gameControls">
    <div id="gameScore">
      <div id="score">得分: 0</div>
      <button id="startBtn">开始游戏</button>
    </div>
    <div class="controls">
      <button id="up" class="control-btn" onclick="changeDirectionByButton('up')">↑</button>
      <button id="left" class="control-btn" onclick="changeDirectionByButton('left')">←</button>
      <button id="right" class="control-btn" onclick="changeDirectionByButton('right')">→</button>
      <button id="down" class="control-btn" onclick="changeDirectionByButton('down')">↓</button>
    </div>
  </div>
</div>
<script>
  const canvas = document.getElementById('gameCanvas');
  const ctx = canvas.getContext('2d');
  const scoreElement = document.getElementById('score');
  const startBtn = document.getElementById('startBtn');

  const gridSize = 15;
  const tileCount = canvas.width / gridSize;

  let snake = [{ x: 10, y: 10 }];
  let food = { x: 15, y: 15 };
  let dx = 0;
  let dy = 0;
  let score = 0;
  let gameRunning = false;

  function drawGame() {
    if (!gameRunning) return;

    clearCanvas();
    moveSnake();
    drawSnake();
    drawFood();
    checkCollision();
    updateScore();
    setTimeout(drawGame, 200);
  }

  function clearCanvas() {
    ctx.fillStyle = '#f0f0f0';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
  }

  function moveSnake() {
    const head = { x: snake[0].x + dx, y: snake[0].y + dy };
    snake.unshift(head);

    if (head.x === food.x && head.y === food.y) {
      generateFood();
      score += 10;
    } else {
      snake.pop();
    }
  }

  function drawSnake() {
    snake.forEach((segment, index) => {
      const gradient = ctx.createLinearGradient(
              segment.x * gridSize,
              segment.y * gridSize,
              (segment.x + 1) * gridSize,
              (segment.y + 1) * gridSize
      );
      gradient.addColorStop(0, '#4CAF50');
      gradient.addColorStop(1, '#45a049');
      ctx.fillStyle = gradient;
      ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize - 2, gridSize - 2);

      if (index === 0) {
        // Draw eyes
        ctx.fillStyle = 'white';
        ctx.beginPath();
        ctx.arc(segment.x * gridSize + 5, segment.y * gridSize + 5, 2, 0, 2 * Math.PI);
        ctx.arc(segment.x * gridSize + 10, segment.y * gridSize + 5, 2, 0, 2 * Math.PI);
        ctx.fill();
      }
    });
  }

  function drawFood() {
    const gradient = ctx.createRadialGradient(
            food.x * gridSize + gridSize / 2,
            food.y * gridSize + gridSize / 2,
            2,
            food.x * gridSize + gridSize / 2,
            food.y * gridSize + gridSize / 2,
            gridSize / 2
    );
    gradient.addColorStop(0, '#ff6b6b');
    gradient.addColorStop(1, '#ee5253');
    ctx.fillStyle = gradient;
    ctx.beginPath();
    ctx.arc(food.x * gridSize + gridSize / 2, food.y * gridSize + gridSize / 2, gridSize / 2 - 1, 0, 2 * Math.PI);
    ctx.fill();
  }

  function generateFood() {
    food.x = Math.floor(Math.random() * tileCount);
    food.y = Math.floor(Math.random() * tileCount);
  }

  function checkCollision() {
    const head = snake[0];

    if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount) {
      gameOver();
    }

    for (let i = 1; i < snake.length; i++) {
      if (head.x === snake[i].x && head.y === snake[i].y) {
        gameOver();
      }
    }
  }

  function gameOver() {
    gameRunning = false;
    startBtn.textContent = '重新开始';
    startBtn.style.display = 'inline-block';
    alert(`游戏结束！你的得分是: ${score}`);
  }

  function updateScore() {
    scoreElement.textContent = `得分: ${score}`;
  }

  function resetGame() {
    snake = [{ x: 10, y: 10 }];
    food = { x: 15, y: 15 };
    dx = 0;
    dy = 0;
    score = 0;
    updateScore();
  }

  document.addEventListener('keydown', changeDirection);

  function changeDirection(event) {
    const LEFT_KEY = 37;
    const RIGHT_KEY = 39;
    const UP_KEY = 38;
    const DOWN_KEY = 40;

    const keyPressed = event.keyCode;

    const goingUp = dy === -1;
    const goingDown = dy === 1;
    const goingRight = dx === 1;
    const goingLeft = dx === -1;

    if (keyPressed === LEFT_KEY && !goingRight) {
      dx = -1;
      dy = 0;
    }

    if (keyPressed === UP_KEY && !goingDown) {
      dx = 0;
      dy = -1;
    }

    if (keyPressed === RIGHT_KEY && !goingLeft) {
      dx = 1;
      dy = 0;
    }

    if (keyPressed === DOWN_KEY && !goingUp) {
      dx = 0;
      dy = 1;
    }
  }

  function changeDirectionByButton(direction) {
    if (direction === 'left' && dx !== 1) {
      dx = -1;
      dy = 0;
    } else if (direction === 'up' && dy !== 1) {
      dx = 0;
      dy = -1;
    } else if (direction === 'down' && dy !== -1) {
      dx = 0;
      dy = 1;
    } else if (direction === 'right' && dx !== -1) {
      dx = 1;
      dy = 0;
    }
  }

  startBtn.addEventListener('click', () => {
    resetGame();
    gameRunning = true;
    startBtn.style.display = 'none';
    drawGame();
  });

  clearCanvas();
</script>
</body>

</html><!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>贪吃蛇游戏</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f0f0f0;
      font-family: Arial, sans-serif;
    }

    .game-container {
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 100%;
      flex-wrap: wrap;
    }

    #gameCanvas {
      border: 2px solid #333;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      margin: 0 auto;
    }

    #gameControls {
      text-align: center;
      margin: 0 auto;
      padding: 0 8px;
    }

    #gameScore {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    #score {
      font-size: 24px;
      margin: 10px 0;
    }

    #startBtn {
      font-size: 18px;
      padding: 12px 24px;
      background: linear-gradient(145deg, #f0f0f0, #cacaca);
      color: #333;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 5px 5px 10px #bebebe,
      -5px -5px 10px #ffffff;
      position: relative;
      overflow: hidden;
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    #startBtn::before {
      content: '';
      position: absolute;
      top: 2px;
      left: 2px;
      right: 2px;
      bottom: 50%;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent);
      border-radius: 8px 8px 0 0;
      pointer-events: none;
    }

    #startBtn:hover {
      transform: translateY(-2px);
      box-shadow: 6px 6px 12px #bebebe,
      -6px -6px 12px #ffffff;
      background: linear-gradient(145deg, #f5f5f5, #d0d0d0);
    }

    #startBtn:active {
      transform: translateY(1px);
      box-shadow: inset 4px 4px 8px #bebebe,
      inset -4px -4px 8px #ffffff;
      background: linear-gradient(145deg, #e6e6e6, #c0c0c0);
    }

    .controls {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      width: 180px;
      margin: 20px auto;
    }

    .control-btn {
      width: 60px;
      height: 60px;
      font-size: 24px;
      background: linear-gradient(145deg, #f0f0f0, #cacaca);
      color: #333;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 5px 5px 10px #bebebe,
      -5px -5px 10px #ffffff;
      position: relative;
      overflow: hidden;
    }

    .control-btn::before {
      content: '';
      position: absolute;
      top: 5%;
      left: 5%;
      right: 5%;
      bottom: 5%;
      border-radius: 50%;
      z-index: -1;
    }

    .control-btn:hover {
      transform: translateY(-2px);
      box-shadow: 6px 6px 12px #bebebe,
      -6px -6px 12px #ffffff;
    }

    .control-btn:active {
      transform: translateY(1px);
      box-shadow: inset 4px 4px 8px #bebebe,
      inset -4px -4px 8px #ffffff;
    }

    #up {
      grid-column: 2;
    }

    #left {
      grid-column: 1;
      grid-row: 2;
    }

    #right {
      grid-column: 3;
      grid-row: 2;
    }

    #down {
      grid-column: 2;
      grid-row: 3;
    }
  </style>
</head>

<body>
<div class="game-container">
  <canvas id="gameCanvas" width="300" height="300"></canvas>
  <div id="gameControls">
    <div id="gameScore">
      <div id="score">得分: 0</div>
      <button id="startBtn">开始游戏</button>
    </div>
    <div class="controls">
      <button id="up" class="control-btn" onclick="changeDirectionByButton('up')">↑</button>
      <button id="left" class="control-btn" onclick="changeDirectionByButton('left')">←</button>
      <button id="right" class="control-btn" onclick="changeDirectionByButton('right')">→</button>
      <button id="down" class="control-btn" onclick="changeDirectionByButton('down')">↓</button>
    </div>
  </div>
</div>
<script>
  const canvas = document.getElementById('gameCanvas');
  const ctx = canvas.getContext('2d');
  const scoreElement = document.getElementById('score');
  const startBtn = document.getElementById('startBtn');

  const gridSize = 15;
  const tileCount = canvas.width / gridSize;

  let snake = [{ x: 10, y: 10 }];
  let food = { x: 15, y: 15 };
  let dx = 0;
  let dy = 0;
  let score = 0;
  let gameRunning = false;

  function drawGame() {
    if (!gameRunning) return;

    clearCanvas();
    moveSnake();
    drawSnake();
    drawFood();
    checkCollision();
    updateScore();
    setTimeout(drawGame, 200);
  }

  function clearCanvas() {
    ctx.fillStyle = '#f0f0f0';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
  }

  function moveSnake() {
    const head = { x: snake[0].x + dx, y: snake[0].y + dy };
    snake.unshift(head);

    if (head.x === food.x && head.y === food.y) {
      generateFood();
      score += 10;
    } else {
      snake.pop();
    }
  }

  function drawSnake() {
    snake.forEach((segment, index) => {
      const gradient = ctx.createLinearGradient(
              segment.x * gridSize,
              segment.y * gridSize,
              (segment.x + 1) * gridSize,
              (segment.y + 1) * gridSize
      );
      gradient.addColorStop(0, '#4CAF50');
      gradient.addColorStop(1, '#45a049');
      ctx.fillStyle = gradient;
      ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize - 2, gridSize - 2);

      if (index === 0) {
        // Draw eyes
        ctx.fillStyle = 'white';
        ctx.beginPath();
        ctx.arc(segment.x * gridSize + 5, segment.y * gridSize + 5, 2, 0, 2 * Math.PI);
        ctx.arc(segment.x * gridSize + 10, segment.y * gridSize + 5, 2, 0, 2 * Math.PI);
        ctx.fill();
      }
    });
  }

  function drawFood() {
    const gradient = ctx.createRadialGradient(
            food.x * gridSize + gridSize / 2,
            food.y * gridSize + gridSize / 2,
            2,
            food.x * gridSize + gridSize / 2,
            food.y * gridSize + gridSize / 2,
            gridSize / 2
    );
    gradient.addColorStop(0, '#ff6b6b');
    gradient.addColorStop(1, '#ee5253');
    ctx.fillStyle = gradient;
    ctx.beginPath();
    ctx.arc(food.x * gridSize + gridSize / 2, food.y * gridSize + gridSize / 2, gridSize / 2 - 1, 0, 2 * Math.PI);
    ctx.fill();
  }

  function generateFood() {
    food.x = Math.floor(Math.random() * tileCount);
    food.y = Math.floor(Math.random() * tileCount);
  }

  function checkCollision() {
    const head = snake[0];

    if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount) {
      gameOver();
    }

    for (let i = 1; i < snake.length; i++) {
      if (head.x === snake[i].x && head.y === snake[i].y) {
        gameOver();
      }
    }
  }

  function gameOver() {
    gameRunning = false;
    startBtn.textContent = '重新开始';
    startBtn.style.display = 'inline-block';
    alert(`游戏结束！你的得分是: ${score}`);
  }

  function updateScore() {
    scoreElement.textContent = `得分: ${score}`;
  }

  function resetGame() {
    snake = [{ x: 10, y: 10 }];
    food = { x: 15, y: 15 };
    dx = 0;
    dy = 0;
    score = 0;
    updateScore();
  }

  document.addEventListener('keydown', changeDirection);

  function changeDirection(event) {
    const LEFT_KEY = 37;
    const RIGHT_KEY = 39;
    const UP_KEY = 38;
    const DOWN_KEY = 40;

    const keyPressed = event.keyCode;

    const goingUp = dy === -1;
    const goingDown = dy === 1;
    const goingRight = dx === 1;
    const goingLeft = dx === -1;

    if (keyPressed === LEFT_KEY && !goingRight) {
      dx = -1;
      dy = 0;
    }

    if (keyPressed === UP_KEY && !goingDown) {
      dx = 0;
      dy = -1;
    }

    if (keyPressed === RIGHT_KEY && !goingLeft) {
      dx = 1;
      dy = 0;
    }

    if (keyPressed === DOWN_KEY && !goingUp) {
      dx = 0;
      dy = 1;
    }
  }

  function changeDirectionByButton(direction) {
    if (direction === 'left' && dx !== 1) {
      dx = -1;
      dy = 0;
    } else if (direction === 'up' && dy !== 1) {
      dx = 0;
      dy = -1;
    } else if (direction === 'down' && dy !== -1) {
      dx = 0;
      dy = 1;
    } else if (direction === 'right' && dx !== -1) {
      dx = 1;
      dy = 0;
    }
  }

  startBtn.addEventListener('click', () => {
    resetGame();
    gameRunning = true;
    startBtn.style.display = 'none';
    drawGame();
  });

  clearCanvas();
</script>
</body>

</html>